<template>
  <div class="box">
    <div class="title">{{ object.goodsName }}</div>
    <div class="box-item">
      <div>
        <div
          style="width:80vw;display:flex;justify-content: center;margin:20px 0 20px 0"
        >
          <img src="../assets/qrcode.png" alt="" style="width:100px;height:100px" />
        </div>
      </div>
      <div>
        <p>资产信息</p>
        <div>
          <table border="1">
            <tr>
              <td>资产名称</td>
              <td>{{ object.goodsName }}</td>
            </tr>
            <tr>
              <td>资产编号</td>
              <td>{{ object.goodsId01 }}</td>
            </tr>
            <tr>
              <td>规格型号</td>
              <td>{{ object.specification }}</td>
            </tr>
            <tr>
              <td>使用单位</td>
              <td>{{ object.goodsUnit }}</td>
            </tr>
            <tr>
              <td>当前数量</td>
              <td>{{ object.goodsNum }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      object: {}
    };
  },
  async created() {
    const data = await this.$http.post(
      `/restful/v1/dd/goods/getGoodsInfo?goodsId=${this.$route.query.goodsId}&wareHouse=${this.$route.query.wareHouse}`
    );
    this.object = data.data.object;
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100%;
  .title {
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: center;
    background: rgba(107, 80, 113, 0.5);
    line-height: 50px;
    font-size: 22px;
  }
  .box-item {
    width: 90vw;
    margin: auto;
    div {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: auto;
      p {
        margin: 20px 0 20px 0;
        padding: 10px 15px;
        width: 100%;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        background: rgb(234, 237, 242);
        img {
          width: 100%;
        }
      }
    }
    div:nth-child(2) {
      p {
        width: 100%;
      }
    }
  }
}
table {
  border-collapse: collapse;
  width: 100%;
  background: rgb(250, 250, 250);
}
table,
table tr td {
  border: 1px solid #ccc;
}
table tr td:nth-child(1) {
  width: 35%;
}
table tr td {
  padding: 10px 10px;
}
</style>
